<template>
  <div class="search">
    <a-auto-complete
      :data="showData"
      @search="getHospitalInfo"
      @select="goDetail"
      placeholder="请输入医院名称..."
      v-model="hosname"
    />
    <a-button type="primary">
      <icon-search></icon-search>
    </a-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { reqHospitalInfo } from "@/api/home";
import { Content, HospitalInfo, Hospital } from "@/api/home/type";
import { useRouter } from "vue-router";

interface ShowDataItem extends Hospital {
  value: string;
}

const $router = useRouter();

// 收集搜索的关键字
const hosname = ref<string>("");

const dataList = ref<Content>([]);
const showData = ref<ShowDataItem[]>([]);

const getHospitalInfo = async (hospitalName: string) => {
  hosname.value = hospitalName;
  let data: HospitalInfo = await reqHospitalInfo(hosname.value);
  if (data.data == null) {
    return;
  }
  dataList.value = data.data;
  showData.value = data.data.map(
    (item: Hospital) => (item.value = item.hosname)
  ) as any;
};

const goDetail = (hospitalName: string) => {
  hosname.value = hospitalName;
  $router.push({
    path: "/hospital/register",
    query: {
      hoscode: selectedHospital.value.hoscode,
    },
  });
};

const selectedHospital = computed(() => {
  return dataList.value.filter((item) => item.hosname == hosname.value)[0];
});
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0px;

  // vue中的深度选择器一共两种：/deep/  和  ::v-deep，下面是官方推荐的用法，你也可以  ::v-deep .arco-input-wrapper
  ::v-deep(.arco-input-wrapper) {
    width: 800px;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px 0 0 5px;
    line-height: 3;
  }
}
</style>
